{{extend './layout/layout.html'}}

{{block 'body'}}
<div class="editor-page" id="editor-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-10 offset-md-1 col-xs-12">
        <form>
          <fieldset>
            <fieldset class="form-group">
                <input v-model="article.title" type="text" class="form-control form-control-lg" placeholder="Article Title">
            </fieldset>
            <fieldset class="form-group">
                <input v-model="article.description" type="text" class="form-control" placeholder="What's this article about?">
            </fieldset>
            <fieldset class="form-group">
                <textarea v-model="article.body" class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea>
            </fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control" placeholder="Enter tags" @keyup.enter="handleAddTag"><div class="tag-list">
                  <span
                    class="tag-default tag-pill"
                    v-for="tag in article.tagList"
                    :key="tag"
                  >
                    <i class="ion-close-round"></i>
                    {% tag %}
                  </span>
                </div>
            </fieldset>
            <button class="btn btn-lg pull-xs-right btn-primary" type="button" @click.prevent="handleSubmit">
                Publish Article
            </button>
          </fieldset>
        </form>
      </div>

    </div>
  </div>
</div>
{{/block}}

{{ block 'script' }}
<script>
;(() => {
  const app = new Vue({
    el: '#editor-page',
    data: {
      article: {
        title: '',
        description: '',
        body: '',
        tagList: []
      }
    },
    methods: {
      async handleSubmit () {
        try {
          const { data } = await axios.post('/articles', { article: this.article })
          window.location.href = `/article/${data.article._id}`
        } catch (err) {
          window.alert('发布失败')
        }
      },

      handleAddTag (e) {
        if (!e.target.value) return
        this.article.tagList = [...new Set([...this.article.tagList, e.target.value])]
        e.target.value = ''
      }
    }
  })
})()
</script>
{{ /block }}
